<template>
  <div class="Home">
    <!--    轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in picList" :key="item.id">
        <img v-lazy="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!--    功能模块-->
    <van-grid class="my-grid" :border="false" :column-num="3">
      <van-grid-item v-for="item in funPicList"
                     :key="item.id"
                     :text="item.title"
                     :icon="item.src"
                     :to="item.to">
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'index',
  data: () => ({
    picList: [],
    funPicList: []
  }),
  created () {
    this.getInit()
  },
  methods: {
    async getInit () {
      const picList = await this.$http.getSwipe()
      this.picList = picList.message

      // 获取功能模块列表
      const funPics = await this.$http.getFunc()
      this.funPicList = funPics.message
    }
  }
}
</script>

<style lang="scss" scoped>
  .Home {

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      height: 300px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .my-grid {
      /deep/ .van-grid-item__icon {
        font-size: 60px;
      }
    }
  }
</style>
